﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScript Client Pages Manual - Develpment</title>
    <link rel="Stylesheet" type="text/css" href="Stylesheet.css" />
    <link rel="Stylesheet" type="text/css" href="Simple.css" />
</head>
<body>
    <div id="header">
        <span class="technology">
            JavaScript Client Pages
        </span>
        <span class="title">
            Developer's Manual            
        </span>
        <span class="sub-title">
            Development
        </span>
    </div>
    <div id="body">
        <h1>Section Outline</h1>
        <ul class="outline">
            <li>
                <a href="#header-xhtml-markup">XHTML Markup</a>
                <ul>
                    <li>
                        <a href="#header-xhtml-markup-examples">Markup Examples</a>
                    </li>
                    <li>
                        <a href="#header-xhtml-markup-scope-of-restrictions">Scope of Restrictions</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#header-embedded-javascript-code">Embedded JavaScript Code</a>
                <ul>
                    <li>
                        <a href="#header-embedded-javascript-code-iteration">Iteration</a>                    
                    </li>
                    <li>
                        <a href="#header-embedded-javascript-code-logic">Logic</a>                    
                    </li>
                    <li>
                        <a href="#header-embedded-javascript-code-gotchas">Gotchas</a>                    
                    </li>
                </ul>            
            </li>
            <li>
                <a href="#header-interfacing-with-invoking-code">Interfacing with Invoking Code</a>            
            </li>
            <li>
                <a href="#header-xml-based-markup">XML-Based Markup</a>
                <ul>
                    <li>
                        <a href="#header-xml-based-markup-outputting-data">Outputting Data</a>                    
                    </li>
                    <li>
                        <a href="#header-xml-based-markup-conditions">Conditions</a>                    
                    </li>
                    <li>
                        <a href="#header-xml-based-markup-switches">Switches</a>                    
                    </li>
                    <li>
                        <a href="#header-xml-based-markup-loops-over-collections">Loops over Collections</a>                    
                    </li>
                </ul>
            </li>
        </ul>
        <h1 id="header-xhtml-markup">
            XHTML Markup</h1>
        <p>
            Unlike a Web browser, the JavaScript Server Pages compiler <span class="emphasis">requires
                the use of proper XML markup</span> because it internally relies on existing
            XML processing technologies. Any XML serialization of HTML is supported, including,
            but not limited to:</p>
        <ul>
            <li>XHTML 1.0</li>
            <li>XHTML 1.1</li>
            <li>XHTML 2.0 (draft)</li>
            <li>HTML5 in XML (also known as XHTML5)</li>
            <li>
                Any other XML-based version of HTML supported by the browser of your
                target audience, possibly with embedded tags from other namespaces.
            </li>
        </ul>
        <p>
            The validity of XHTML markup may be optionally verified using the XML schemas provided
            with this distribution. However, while the use of invalid XHTML, such as obsolete
            or non-existant tags and attributes, will be tolerated, it is <span class="warning">
                mandatory</span> that the mark-up be <span class="emphasis">well-formed</span>,
            since unparseable XML content will cause a <span class="emphasis">compile-time error</span>.
        </p>
        <h2 id="header-xhtml-markup-examples">
            Markup Examples</h2>
        <h3>
            Invalid Mark-Up - Not Well-Formed</h3>
        <div class="code" style="margin-bottom: 10px">
            ...<br />
            &lt;p class=<span class="invalid">main</span>&gt;<br />
            Lorem ipsum dolor <span class="invalid">&lt;br&gt;</span>
            <br />
            new line <span class="invalid">&lt;br&gt;</span><br />
            2 <span class="invalid">&lt;</span>= x + 5<br />
            <span class="invalid">&lt;div class=&quot;remarks&quot;&gt;</span> This is a <span
                class="invalid">&lt;ul&gt;</span> tag. Let&#39;s rock<span class="invalid">&amp;</span>roll!&lt;/div&gt;<br />
            ...</div>
        <h3>
            Valid Mark-Up</h3>
        <div class="code">
            ...<br />
            &lt;p class=<span class="valid">&quot;main&quot;</span>&gt;<br />
            Lorem ipsum dolor <span class="valid">&lt;br /&gt;</span>
            <br />
            new line <span class="valid">&lt;br /&gt;</span><br />
            2 <span class="valid">&amp;lt;</span>= x + 5<br />
            <span class="valid">&lt;/p&gt;</span><br />
            &lt;div class=&quot;remarks&quot;&gt; This is a <span class="valid">&amp;lt;ul&amp;gt;</span>
            tag. Let&#39;s rock<span class="valid">&amp;amp;</span>roll!&lt;/div&gt;<br />
            ...</div>
        <h2 id="header-xhtml-markup-scope-of-restrictions">
            Scope of Restrictions</h2>
        <p>
            Although it is strongly recommended to use well-formed mark-up throughout your Web
            site, the well-formedness requirement applies <span class="emphasis">only to JavaScript
                Client Pages</span>, i.e. to any dynamic HTML code that will be rendered using
            the JSCP framework.
        </p>
        <p>
            This implies that if your current Web site is written in HTML 4.x, or even unstructured
            "tag soup" that does not have a DTD or schema attached to it, you <span class="emphasis">
                can still</span> develop new content in JSCP <span class="code">without rewriting</span>
            your existing code.
        </p>
        <h1 id="header-embedded-javascript-code">
            Embedded JavaScript Code</h1>
        <p>
            JavaScript code can be embedded into a page using a <span class="code-reference">&lt;?js
                ... ?&gt;</span> processing instruction, which is very similar to the way code
            is included into pages in PHP.
        </p>
        <p>
            Given below are a few examples of how embedded code can be used
        </p>
        <h2 id="header-embedded-javascript-code-iteration">
            Iteration</h2>
        <div class="code">
            &lt;ul&gt;
            <div class="indent">
                <span class="highlight">&lt;?js </span><span class="keyword highlight">for</span><span
                    class="highlight"> (</span><span class="keyword highlight">var</span><span class="highlight">
                        i=1;i&lt;10;i++) { ?&gt;</span>
                <div class="indent">
                    &lt;li&gt;
                    <div class="indent">
                        <span class="highlight">&lt;?js text('Item #' + i); ?&gt;</span>
                    </div>
                    &lt;/li&gt;
                </div>
                <span class="highlight">&lt;? } ?&gt;</span>
            </div>
            &lt;/ul&gt;
        </div>
        <h2 id="header-embedded-javascript-code-logic">
            Logic</h2>
        <div class="code">
            &lt;ul&gt;
            <div class="indent">
                &lt;?js <span class="keyword">for </span>(<span class="keyword">var </span>i=1;i&lt;10;i++)
                { ?&gt;
                <div class="indent">
                    &lt;li&gt;
                    <div class="highlight indent">
                        &lt;?js
                        <div class="indent">
                            <span class="keyword">if</span> (i %% 2) {
                            <div class="indent">
                                attribute('class', 'even');
                            </div>
                            } <span class="keyword">else</span>{
                            <div class="indent">
                                attribute('class', 'odd');
                            </div>
                            }
                        </div>
                        ?&gt;
                    </div>
                    <div class="code">
                        &lt;?js text('Item #' + i); ?&gt;
                    </div>
                    &lt;/li&gt;
                </div>
                &lt;? } ?&gt;
            </div>
            &lt;/ul&gt;
        </div>
        <h4 id="header-embedded-javascript-code-gotchas">
            Embedded Code Gotchas</h4>
        <p>
            Unlike PHP, which outputs plain text to a stream, JavaScript Client Pages output
            proper DOM-generating code that has to construct a proper tree of elements, and
            the compiler relies on the input being well-formed XML.
        </p>
        <p>
            Therefore, the following would be possible in PHP but not in JSCP:
        </p>
        <div class="code">
            &lt;?php <span class="keyword">if</span> ($type = 1): ?&gt;
            <div class="indent">
                &lt;/li&gt;
            </div>
            &lt;?php <span class="keyword">else</span>: ?&gt;
            <div class="indent">
                &lt;/li&gt;
                <div class="code-block">
                    &lt;li class="type-2"&gt;
                    <div class="indent">
                        Type 2
                    </div>
                    &lt;/li&gt;
                </div>
            </div>
            &lt;?php <span class="keyword">endif</span>; ?&gt;
        </div>
        <p>
            Fortunately, in most cases, such code can be easily refactored to meet JSCP's XML
            well-formedness requirement.
        </p>
        <h1 id="header-interfacing-with-invoking-code">
            Interfacing with Invoking Code</h1>
        <p>
            In order to pass content or parameters to a page, a "parameters" object may be passed
            by the invoking code:
        </p>
        <div class="code">
            JSClientPage.render(<br />
            <div class="indent">
                'page',
                <br />
                'target',<br />
                <div class="highlight">
                    {
                    <div class="indent">
                        firstName: 'John',<br />
                        lastName: 'Doe',<br />
                        hobbies:
                        <br />
                        [
                        <div class="indent">
                            'rock',<br />
                            'hiking',
                            <br />
                            'canoeing'
                            <br />
                        </div>
                        ]
                    </div>
                    }
                </div>
            </div>
            );
        </div>
        <p>
            These parameters become accessible in the JavaScript Client Page via the <span class="code-reference">
                input</span> object. For instance, the <span class="code-reference">firstName</span>
            parameter would become <span class="code-reference">input.first-name</span>.
        </p>
        <h1 id="header-xml-based-markup">
            XML-based Markup</h1>
        <p>
            While embedded code is very easy to use in simple pages, in more complex scenarios,
            it may become rather unwieldy, especially given that as of now, there is no direct
            IDE support for JavaScript code embedded via processing instructions (e.g. code
            folding).
        </p>
        <p>
            It is also important to note that the compiler <span class="emphasis">does not understand
                JavaScript</span>; nor does it detect JavaScript parse errors at compile time.
        </p>
        <p>
            In order to address common scenarios requiring the use of control structures in
            templates, as well as outputting data, a number of extension elements have been
            provided in the JSClientPages namespace. These elements provide a cleaner way of
            representing
        </p>
        <ul>
            <li>Data Output</li>
            <li>Iteration</li>
            <li>Conditions</li>
            <li>Switches</li>
        </ul>
        <h2 id="header-xml-based-markup-outputting-data">
            Outputting Data</h2>
        <a id="anchor-element-output"></a>
        <table class="element">
            <tbody>
                <tr>
                    <th>
                        Element Name
                    </th>
                    <td class="xml">
                        js:output
                    </td>
                </tr>
                <tr>
                    <th>
                        Description
                    </th>
                    <td>
                        Outputs the value of a JavaScript expression.
                        <br />
                        <br />
                        The semantics of this expression are similar to &lt;?js text(...) ?&gt;.<br />
                        <br />
                        <span class="warning">Important:</span> Character strings without quotes are interpreted
                        as identifiers rather than literal text. The use of undefined identifiers in JavaScript
                        expressions will result in a <span class="emphasis">runtime error</span>.
                    </td>
                </tr>
                <tr>
                    <th>
                        Attributes
                    </th>
                    <td class="attributes">
                        <table class="attributes">
                            <thead>
                                <tr>
                                    <th>
                                        Attribute Name
                                    </th>
                                    <th>
                                        Description
                                    </th>
                                    <th>
                                        Required
                                    </th>
                                    <th>
                                        Example
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="xml">
                                        value
                                    </td>
                                    <td>
                                        The JavaScript expression to output
                                    </td>
                                    <td>
                                        Yes
                                    </td>
                                    <td>
                                        input.firstName + ' ' + input.lastName
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <th>
                        Occurs In
                    </th>
                    <td>
                        <ul>
                            <li>HTML block elements
                                <ul>
                                    <li>div</li>
                                    <li>p</li>
                                    <li>h1, h2, h3, h4, h5, h6</li>
                                    <li>etc.</li>
                                </ul>
                            </li>
                            <li>HTML inline elements
                                <ul>
                                    <li>span</li>
                                    <li>textarea</li>
                                    <li>button</li>
                                    <li>etc.</li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5>
            Example</h5>
        <div class="code">
            &lt;table class=&quot;details&quot;&gt;<div class="indent">
                &lt;tbody&gt;<br />
                <div class="indent">
                    &lt;tr&gt;<br />
                    <div class="indent">
                        &lt;th&gt;First Name:&lt;/th&gt;<br />
                        &lt;td&gt; <span class="keyword">&lt;js:output value=&quot;input.person.firstName&quot;
                            /&gt; </span>&lt;/td&gt;<br />
                    </div>
                    &lt;/tr&gt;<br />
                    &lt;tr&gt;<br />
                    <div class="indent">
                        &lt;th&gt;Last Name:&lt;/th&gt;<br />
                        &lt;td&gt; <span class="keyword">&lt;js:output value=&quot;input.person.lastName&quot;
                            /&gt; </span>&lt;/td&gt;<br />
                    </div>
                    &lt;/tr&gt;</div>
                &lt;/tbody&gt;</div>
            <br />
            &lt;/table&gt;</div>
        <h2 id="header-xml-based-markup-conditions">
            Conditions</h2>
        <h3>
            js:condition</h3>
        <h4>
            Description</h4>
        <p>
            Represents a condition construct, similar to if..else and if...then...else construct
            in programming languages.</p>
        <p>
            This element can only be used to represent a <span class="emphasis">single condition</span>.
            Switches with multiple conditions will be discussed in the <a href="#Switches">next
                section</a>.
        </p>
        <h4>
            Synopsis</h4>
        <div class="synopsis">
            <span class="keyword">&lt;js:condition&gt;</span>
            <div class="indent">
                <div class="code-block">
                    <span class="keyword">&lt;js:if&gt; </span>&lt;!-- a JavaScript condition --&gt;
                    <span class="keyword">&lt;/js:if&gt;</span>
                </div>
                <div class="code-block">
                    <span class="keyword">&lt;js:then&gt;</span> ;&lt;!-- mark-up and/or code <span class="keyword">
                        &lt;/js:then&gt;</span>
                </div>
                <span class="keyword">&lt;js:else&gt;</span> &lt;!-- mark-up and/or code --&gt;
                <span class="keyword">;&lt;/js:else&gt;</span> &lt;!-- optional --&gt;</div>
            <span class="keyword">&lt;/js:condition&gt;</span>
        </div>
        <h4>
            Child Elements</h4>
        <div class="elements">
            <div class="element">
                <h5>
                    js:if <span class="required">required</span></h5>
                <h6>
                    Description</h6>
                <p>
                    The JavaScript condition to be evaluated. The condition will be evaluated as if
                    it were included directly in a JavaScript statement with
                    <samp>
                        0</samp>s,
                    <samp>
                        null</samp>
                    values,
                    <samp>
                        undefined</samp>
                    values and empty strings or arrays being equivalent to
                    <samp>
                        false</samp>
                    and everything else evaluating to
                    <samp>
                        true</samp>.
                </p>
                <h6>
                    Content</h6>
                <p>
                    JavaScript code. Any characters or combinations of characters that have a special
                    meaning in XML should be replaced with entities. Notable examples include
                    <samp>
                        "&lt;"</samp>,
                    <samp>
                        "&gt;"</samp>
                    and
                    <samp>
                        &amp;</samp>.
                </p>
                <h6>
                    Example</h6>
                <div class="example">
                    <span class="keyword">&lt;js:if&gt;</span>
                    <div class="indent">
                        <code>input.employee.position == 'manager'</code>
                    </div>
                    <span class="keyword">&lt;/js:if&gt;</span>
                </div>
            </div>
            <div class="element">
                <h5>
                    js:then <span class="required">required</span></h5>
                <h6>
                    Description</h6>
                <p>
                    The block that will be evaluated and displayed if the condition is true. This block
                    may contain any combination of mark-up, embedded code and other tags.
                </p>
                <h6>
                    Contents</h6>
                <p>
                    <span class="keyword">js:then</span> may contain any of the following:
                </p>
                <ul>
                    <li>XHTML mark-up</li>
                    <li>Other elements from the <span class="keyword">js</span> namespace, including conditions.
                    </li>
                    <li>JavaScript code in the <span class="keyword">&lt;js ... ?&gt;</span> processing
                        instruction. </li>
                </ul>
                <h6>
                    Example</h6>
                <div class="example">
                    <span class="keyword">&lt;js:condition&gt;</span>
                    <div class="indent">
                        <div class="code-block">
                            <span class="keyword">&lt;js:if&gt;</span> <code>input.employee.position == 'manager'</code>
                            <span class="keyword">&lt;/js:if&gt;</span>
                        </div>
                        <div class="code-block">
                            <span class="keyword">&lt;js:then&gt;</span>
                            <div class="indent highlight">
                                <span class="keyword">&lt;<a href="#anchor-element-forEach">js:forEach</a> items="input.employee.subordinates"</span>
                                item="subordinate"&gt;
                                <div class="indent">
                                    <span class="keyword">&lt;<a href="#anchor-element-output">js:output</a> value="subordinate.firstName
                                        + &#39; &#39; + subordinate.lastName" /&gt;</span></div>
                                <span class="keyword">&lt;/js:forEach&gt;</span>
                            </div>
                            <span class="keyword">&lt;/js:then&gt;</span>
                        </div>
                    </div>
                    <span class="keyword">&lt;/js:condition&gt;</span>
                </div>
            </div>
            <div class="element">
                <h5>
                    js:else <span class="optional">optional</span></h5>
                <h6>
                    Description</h6>
                <p>
                    The block that will be evaluated and displayed if the condition is false. Like js:then,
                    js:else can contain code and markup.
                </p>
                <h6>
                    Content</h6>
                <ul>
                    <li>XHTML markup</li>
                    <li>Other elements in the <span class="keyword">js</span> namespace, including other
                        conditions. </li>
                    <li>Embedded code in the <span class="keyword">&lt;?js ... ?&gt;</span> processing instruction</li>
                </ul>
                <h6>
                    Example</h6>
                <div class="example">
                    <span class="keyword">&lt;js:condition&gt;</span>
                    <div class="indent">
                        <div class="code-block">
                            <span class="keyword">&lt;js:if&gt;</span> <code>input.employee.position == 'manager'</code>
                            <span class="keyword">&lt;/js:if&gt;</span>
                        </div>
                        <div class="code-block">
                            <span class="keyword">&lt;js:then&gt;</span>
                            <div class="indent">
                                A manager with <span class="keyword">&lt;<a href="#anchor-element-output">js:output</a>
                                    value="input.employee.subordinates.count" /&gt; </span>
                            </div>
                            <span class="keyword">&lt;/js:then&gt;</span>
                        </div>
                        <div class="code-block">
                            <span class="keyword">&lt;js:else&gt;</span>
                            <div class="indent highlight">
                                <samp>
                                    &lt;span class="non-manager"&gt;</samp>
                                Not a manager
                                <samp>
                                    &lt;/span&gt;</samp>
                            </div>
                            <span class="keyword">&lt;/js:else&gt;</span>
                        </div>
                    </div>
                    <span class="keyword">&lt;js:condition&gt;</span>
                </div>
            </div>
        </div>
        <h2 id="header-xml-based-markup-switches">
            Switches</h2>
        <p class="code">
            In JSCP, a switch is a series of conditions with attached code blocks where only
            one is expected to evaluate to true. Even in cases when two or more of the switch
            conditions are true, the first one takes precedence over the others.</p>
        <p>
            In the most common case, switches check the value of a single variable against several
            possibilitiies in order to decide on a course of action. Given below is an example
            of this type of switch in JavaScript.
        </p>
        <h3>
            JavaScript Example:</h3>
        <div class="code">
            <span class="keyword">switch</span> (grade) {<br />
            <div class="indent">
                <span class="keyword">case</span> &#39;A&#39;:<br />
                <div class="indent">
                    evaluation = &#39;excellent&#39;;<br />
                    <span class="keyword">break;</span><br />
                </div>
                <span class="keyword">case</span> &#39;B&#39;:
                <div class="indent">
                    evaluation = &#39;good&#39;;<br />
                    <span class="keyword">break</span> ;<br />
                </div>
                <span class="keyword">case </span>&#39;C&#39;:<br />
                <div class="indent">
                    evaluation = &#39;fair&#39;;<br />
                    break;<br />
                </div>
                <span class="keyword">default</span>:<br />
                <div class="indent">
                    evaluation = &#39;poor&#39;;<br />
                    <span class="keyword">break;</span>
                </div>
            </div>
            }
        </div>
        <p>
            In JSCP, a similar switch can be implemented as follows:</p>
        <h3>
            JavaScript Client Pages Example</h3>
        <div class="code">
            <span class="keyword">&lt;js:switch value=&quot;input.grade&quot;&gt;</span><br />
            <div class="indent">
                <span class="keyword">&lt;js:case if=&quot;&#39;A&#39;&quot;&gt;</span><br />
                <div class="indent">
                    &lt;span class=&quot;grade-good&quot;&gt;Excellent&lt;/span&gt;<br />
                </div>
                <span class="keyword">&lt;/js:case&gt;</span><br />
                <span class="keyword">&lt;js:case if=&quot;&#39;B&#39;&quot;&gt;</span><br />
                <div class="indent">
                    &lt;span class=&quot;grade-good&quot;&gt;Good&lt;/span&gt;<br />
                </div>
                <span class="keyword">&lt;/js:case&gt;</span><br />
                <span class="keyword">&lt;js:case if=&quot;&#39;C&#39;&quot;&gt;</span><br />
                <div class="indent">
                    &lt;span class=&quot;grade-bad&quot;&gt;Fair&lt;/span&gt;<br />
                </div>
                <span class="keyword">&lt;/js:case&gt;</span><br />
                <span class="keyword">&lt;js:default&gt;</span><br />
                <div class="indent">
                    &lt;span class=&quot;grade-bad&quot;&gt;Poor&lt;/span&gt;<br />
                </div>
                <span class="keyword">&lt;/js:default&gt;</span><br />
            </div>
            <span class="keyword">&lt;/js:switch&gt;</span></div>
        <h2 id="header-xml-based-markup-loops-over-collections">
            Loops over Collections</h2>
        <a id="anchor-element-forEach"></a>
        <h3>
            js:forEach</h3>
        <h4>
            Description</h4>
        <p>
            Renders the same section of markup for every element of the specified JavaScript
            collection, which may be an array or an iterable object. The iteration will be implemented
            as a one of the following constructs depending on the type of object:</p>
        <div class="code">
            <span class="keyword">for</span> (i=0;i&lt; array.length;i++) {
            <div class="indent">
                render(array[i]);
            </div>
            }
        </div>
        <div class="code">
            <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">
                in</span> object) {
            <div class="indent">
                render(object[key]);
            </div>
            }
        </div>
        <h4>
            Synopsis</h4>
        <div class="synopsis">
            <span class="keyword">&lt;js:forEach collection="</span><span class="value">items</span>"
            <span class="keyword">item=</span>"<span class="value">item</span>" <span class="keyword">
                key=</span>"<span class="value">itemKey</span>"&gt;
            <div class="indent">
                &lt;!--
                <div class="indent">
                    Code and markup to output each item by referencing the "<span class="value">item</span>"
                    variable, possibly using the "<span class="value">itemKey</span>" variable to indicate
                    the number of the item within the collection in the case of an array or the name
                    of the property in the case of an object.
                </div>
                --&gt;
            </div>
            <span class="keyword">&lt;/forEach&gt;</span>
        </div>
        <h4>
            Attributes</h4>
        <div class="attributes">
            <div class="attribute">
                <h5>
                    items <span class="required">required</span></h5>
                <h6>
                    Description</h6>
                <p>
                    A reference to a JavaScript collection, i.e. an array or an enumerable object, over
                    which this section will be iterating
                </p>
                <h6>
                    Examples</h6>
                <div class="example">
                    [
                    <div class="indent">
                        <ul class="simple">
                            <li>'Windows', </li>
                            <li>'Mac OS X',</li>
                            <li>'Linux',</li>
                            <li>'QNX'</li>
                        </ul>
                    </div>
                    ]
                </div>
                <div class="example">
                    {
                    <div class="indent">
                        <ul class="simple">
                            <li>code : 'ECMA-262',</li>
                            <li>name : 'ECMAScript',</li>
                            <li>implementations : [
                                <div class="indent">
                                    <ul class="simple">
                                        <li>'JavaScript',</li>
                                        <li>'JScript.NET',</li>
                                        <li>'ActionScript',</li>
                                    </ul>
                                </div>
                                ] </li>
                        </ul>
                    </div>
                    }
                </div>
            </div>
            <div class="attribute">
                <h5>
                    item <span class="required">required</span></h5>
                <h6>
                    Description</h6>
                <p>
                    The name of the iteration in which individual elements from the collection will
                    be placed on every iteration. For instance, if the collection is named
                    <samp>
                        persons</samp>, it might be advisable to call the item
                    <samp>
                        person</samp>.
                </p>
                <h6>
                    Example</h6>
                <div class="example">
                    &lt;ul&gt;
                    <div class="indent">
                        <span class="keyword">&lt;js:forEach items="<span class="value">persons</span>" item="<span
                            class="value">person</span>"&gt;</span>
                        <div class="indent">
                            &lt;li&gt;
                            <div class="indent">
                                <span class="keyword">&lt;js:output value="<span class="value">person</span>.firstName
                                    + ' ' + <span class="value">person</span>.lastName"</span> /&gt;
                            </div>
                            &lt;/li&gt;
                        </div>
                        <span class="keyword">&lt;/js:forEach&gt;</span>
                    </div>
                    &lt;/ul&gt;
                </div>
            </div>
            <div class="attribute">
                <h5>
                    key <span class="optional">optional</span></h5>
                <p>
                    The name of the variable used to store one of the following:
                </p>
                <dl>
                    <dt>The Item Index</dt>
                    <dd>
                        If the <span class="value">items</span> collection is an <span class="data-type">array</span>,
                        the <span class="value">key</span> will represent the index of the number within
                        the array, i.e. the number that can be used to locate the value using the [] operator.
                    </dd>
                    <dt>The Property Name</dt>
                    <dd>
                        If the <span class="value">items</span> collection is an <span class="data-type">object</span>,
                        the <span class="value">key</span> will contain the name of the properties returned
                        by the <span class="keyword">for .. in</span> construct.
                    </dd>
                </dl>
            </div>
        </div>
        <h4>
            Content</h4>
        <p>
            The <span class="keyword">&lt;js:forEach&gt;</span> element can contain any of the
            following:</p>
        <ul>
            <li>Text content</li>
            <li>Embedded scripts in the <span class="keyword">&lt;?js ... ?&gt;</span> processing
                instructions</li>
            <li>XHTML elements and entities (must be well-formed)</li>
            <li>Other elements from the <span class="keyword">js</span> namespace including another
                <span class="keyword">&lt;js:forEach&gt;</span> for a nested collection</li>
        </ul>
    </div>
    <div id="footer">
        <p>            
            <a href="http://validator.w3.org/check?uri=referer">
                <img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict"
                    height="31" width="88" /></a>
            <span class="copyright">DiXon-JSClientPages &copy; 2008 by Artem Ploujnikov. All Rights Reserved.</span>
        </p>
    </div>
</body>
</html>
